<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>媒体查询</title>
		<style>
			#pic{
				height: 200px;
				width: 400px;
				overflow: hidden;
				margin: 100px auto;
			}
			@media only screen and (max-width:800px) {
			  #pic{
				  border: 5px double greenyellow;
				 transform: rotate(720deg);
				 transition: all 4s;
			  }
			}
			@media print {
				#pr{
					display: none;
				}
			}
		</style>
	</head>
	<body>
		<div id="pic">
			<img src="../11-18/img/img3.png"/>
		</div>
		<div id="pr">
			<button>打印机</button>
		</div>
	</body>
</html>